<template>
	<view  :data-theme='theme()' :class="theme() || ''">
		<!-- #ifdef APP-PLUS -->
		<header-bar></header-bar>
		<!-- #endif -->
		<view class="top-box">
			<view class="index-search-box index-search-box_re d-b-c" id="searchBox">
				<view class="index-search index-search_re t-c seacth">
					<span class="icon iconfont icon-sousuo"></span>
					<input type="text" v-model="searchtxt" class="flex-1 ml10 f30 gray3"  placeholder-class="f24 gray6"
					 placeholder="搜索店铺" confirm-type="search" @confirm="search()" />
				</view>
			</view>
      <view class="inner-tab" :style="{ position: isFixed ? 'fixed' : 'static', top: isFixed ? '0' : '' }">
				<view :class="type_active=='all'?'item active':'item'" @click="tabTypeFunc('all')">
					<view class="box">综合</view>
				</view>
				<view :class="type_active=='location'?'item active':'item'" @click="tabTypeFunc('location')">
					<view class="box">
						<text>距离</text>
					</view>
				</view>
        <view :class="type_active=='sales'?'item active':'item'" @click="toggleCateMask('show')">
					<view class="box">商圈</view>
				</view>
        <view class="item" @click="toggleProductCateMask('show')">
          <view class="box">
              <view>分类</view>
          </view>
        </view>
			</view>
		</view>
		<view class="prodcut-list-wrap" :style="{ minHeight: isFixed ? '100vh' : 'auto' }">
			<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
			 :refresher-triggered="triggered" @scrolltolower="scrolltolowerFunc" refresher-enabled="true" @refresherrefresh="onRefresh"
			 @refresherrestore="onRestore">
				<view class="shop_list_body">
					<view class="shop_list_body_item" v-for="(item,index) in shopData" :key="index">
						<view class="shop_list_body_item_shop" @click="goto_shop(item.shopSupplierId)">
							<view class="shop_list_body_item_shop_logo">
								<image :src="item.logoFilePath"></image>
							</view>
							<view class="shop_list_body_item_shop_info">
								<view class="h1 title">{{item.name}}</view>
								<view class="h3 brand">主营：{{item.categoryName}}</view>
								<view class="h3 sales">销量：{{item.productSales}}件<text class="ml10 mr10">| </text>关注：{{item.favCount}}</view>
                <view class="h3 sales">商圈：{{item.shopBusinessName}}</view>
							</view>
							<view class="shop_list_body_item_shop_others">
								<view class="shop-go-btn">去逛逛</view>
							</view>
						</view>

            <scroll-view class="product-list" scroll-x style="margin: 20rpx 0">
              <view v-if="shopData[index].productList.length>0" :class="shopData[index].productList.length<3?'shop_list_body_item_product2':'shop_list_body_item_product'">
                <view class="shop_list_body_item_product_item" v-for="(item2,index2) in shopData[index].productList" :key="index2"
                 @click="goto_product(item2.productId)">
                  <view>
                    <image :src="item2.productImage"></image>
                  </view>
                  <view class="shop_list_body_item_product_item_price">
                    <view class="f22 red">¥
                      <text class="f32">
                        {{item2.productPrice}}
                      </text></view>
                  </view>
                </view>
              </view>
              <view v-else class='shop_list_body_item_product_item'  @click="goto_shop(item.shopSupplierId)">
                <view>
                  <image mode="aspectFit" src="/static/shop/product-empty.png"></image>
                </view>
                <view style="margin: 20upx;">商家未上架优惠</view>
              </view>
            </scroll-view>

					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="shopData.length==0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</scroll-view>
		</view>
		<tabBar></tabBar>

    <!--商圈 :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" -->
    <view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
      <view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
        <scroll-view scroll-y class="cate-list">
          <view class="cate-item b-b" @click="changeAllbusinessId()">全部商圈</view>
          <view v-for="item in cityBusiness" :key="item.districtId">
            <view class="cate-item b-b two" :class="{active: item.districtId==currDistrictId}" @click="changeDistrictId(item)">{{item.district}}</view>
            <view
                v-for="tItem in item.childList" :key="tItem.businessId"
                class="cate-item b-b"
                :class="{active: tItem.businessId==currBusinessId}"
                @click="changeBusiness(tItem)">
              {{tItem.businessName}}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 类目 -->
    <view class="cate-mask" :class="productcateMaskState===0 ? 'none' : productcateMaskState===1 ? 'show' : ''" @click="toggleProductCateMask">
      <view class="cate-content" @click.stop.prevent="stopProductCatePrevent" @touchmove.stop.prevent="stopProductCatePrevent">
        <scroll-view scroll-y class="cate-list">
          <view class="cate-item b-b two" @click="changeAllProductCate()">全部分类</view>
          <view v-for="item in supplierCategoryList" :key="item.categoryId">
            <view class="cate-item b-b " @click="changeProductCate(item)">{{item.name}}</view>
          </view>
        </scroll-view>
      </view>
    </view>

	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				triggered: true,
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*状态选中*/
				state_active: -1,
				no_more: false,
				loading: true,
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 10,
				/*顶部刷新*/
				topRefresh: false,
				/*类别选中*/
				type_active: 'all',
				/*价格选中*/
				price_top: false,
				/*店铺列表*/
				shopData: [],
				/*当前页面*/
				searchtxt: '',
				keyWord: '',
				stateTab: false,

        // 地区分类
        categoryIndex: 0,
        openCategory: {
          color: "#000000",
          open: 0
        },
        isFixed: false,
        offsetTop: 0,
        categoryList: [{
          name: '推荐',
          isRecommend: 1
        },{
          name: '青秀区',
          category_id: '2165'
        },{
          name: '江南区',
          category_id: '2166'
        },{
          name: '西乡塘区',
          category_id: '2167'
        },{
          name: '良庆区',
          category_id: '2168'
        },{
          name: '邕宁区',
          category_id: '2169'
        },{
          name: '兴宁区',
          category_id: '2164'
        }],
        currentDistrictId:null,
        isRecommend:1, // 默认查推荐的

        currCityName:'南宁市',
        cateMaskState: 0, //商圈面板展开状态
        cityBusiness:[], // 商圈
        currDistrictId:null, // 选中商圈id
        currBusinessId:null, // 选中商圈id

        productcateMaskState: 0, //类目面板展开状态
        supplierCategoryList:[], // 类目
        currCategoryId:'', // 选中类目id

			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.shopData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onShow() {
			this.getTabBarLinks();
		},
		mounted() {
			this.init();
			this._freshing = false;
			this.restoreData();
			this.getData();
      this.getBusinessGrop();
      this.getSupplierCategory();
		},

    // 推荐分类菜单吸顶
    onPageScroll(e) {
      // 获取滚动的位置
      const scrollTop = e.scrollTop;
      // console.log("scrollTop",scrollTop,uni.getSystemInfoSync().windowHeight -400);
      // 判断滚动位置是否超过手机屏幕的高度
      if (scrollTop >= (uni.getSystemInfoSync().windowHeight - 100)) {
        // 将菜单添加固定定位样式，使其吸附在顶部
        // 使用uni.$b调用组件，注意选择器的命名可能会有不同
        this.isFixed = true;
      } else {
        // 移除固定定位样式
        this.isFixed = false;
      }
    },

    onShareAppMessage:function(){
      let sid = '';
      /* if(this.userInfo.userUuid){
         sid = this.userInfo.userUuid;
       }*/
      console.log("分享用户ID: "+sid);
      return {
        title: '同城好街，逛街不走冤枉路，与你分享!',
        path: '/pages/index/index?sid='+sid,
        success(res) {
          uni.showToast({
            title: '分享成功',
          })
        },
        fail(res) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      }
    },

    onShareTimeline:function(){
      let sid = '';
      return {
        title: '同城好街，逛街不走冤枉路，与你分享!',
        path: '/pages/index/index?sid=' + sid,
        success(res) {
          uni.showToast({
            title: '分享成功',
          })
        },
        fail(res) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      }
    },

		methods: {
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().in(self).select('.top-box');
						view.boundingClientRect(data => {
							console.log(data)
							let h = self.phoneHeight - data.height;
							self.scrollviewHigh = h;
						}).exec();
					}
				});
			},
			/*还原初始化*/
			restoreData() {
				this.shopData = [];
				this.page = 1;
				this.no_more = false;
				this.loading = true;
				this.category_id = 0;
				this.sortType = '';
				this.sortPrice = 0;
			},
			/*类别切换*/
			tabTypeFunc(e) {
				let self = this;
				self.shopData = [];
				self.page = 1;
				self.no_more = false;
				self.loading = true;
				self.type_active = e;
				self.getData();
			},

      // 商圈
      stopPrevent(){},
      stopProductCatePrevent(){},

      // 显示商圈面板
      toggleCateMask(type){
        console.log("-------------"+type);
        let timer = type === 'show' ? 10 : 300;
        let	state = type === 'show' ? 1 : 0;
        this.cateMaskState = 2;
        setTimeout(()=>{
          this.cateMaskState = state;
        }, timer)
      },

      toggleProductCateMask(type){
        let timer = type === 'show' ? 10 : 300;
        let	state = type === 'show' ? 1 : 0;
        this.productcateMaskState = 2;
        setTimeout(()=>{
          this.productcateMaskState = state;
        }, timer)
      },

      getBusinessGrop() {
        let that = this;
        if(!this.currentCity){
          this.currCityName = "南宁市";
        }
        let option = {
          currCityName:this.currCityName
        }
        that._postBody('business/business/cityBusiness', option, (res) => {
          that.cityBusiness = res.data;
        })
      },

      getSupplierCategory() {
        let that = this;
        that._postBody('/supplier/index/getSupplierCategory', null, (res) => {
          that.supplierCategoryList = res.data;
        })
      },

      changeAllbusinessId(){
        this.currDistrictId = null;
        this.currBusinessId = null;
        this.restoreData();
        this.getData();
        this.cateMaskState = 0;
      },

      changeDistrictId(item){
        this.currDistrictId = item.districtId;
        this.currBusinessId = null;
        this.restoreData();
        this.getData();
        this.cateMaskState = 0;
      },

      changeBusiness(item){
        this.currDistrictId = null;
        this.currBusinessId = item.businessId;
        this.restoreData();
        this.getData();
        this.cateMaskState = 0;
      },

      changeAllProductCate(){
        this.currCategoryId = null;
        this.restoreData();
        this.getData();
        this.productcateMaskState = 0;
      },

      changeProductCate(item){
        this.currCategoryId = item.categoryId;
        this.restoreData();
        this.getData();
        this.productcateMaskState = 0;
      },


      //点击nav控制下面的展示
      setCategoryIndex(e) {
        this.categoryIndex = e;
        if(this.categoryList[e].category_id){
          this.currentDistrictId = this.categoryList[e].category_id;
        }else{
          this.currentDistrictId = null;
        }
        if(this.categoryList[e].isRecommend){
          this.isRecommend = this.categoryList[e].isRecommend;
        }else{
          this.isRecommend = null;
        }

        /*this.business.list = [];
        this.business.pageIndex = 1;
        this.business.noMore = false;
        this.getBusinessList();*/
      },

			/*获取数据*/
			getData() {
				let self = this;
				let page = self.page;
				let list_rows = self.list_rows;
				self.loading = true;
				self._postBody('supplier/index/list', {
					pageIndex: page || 1,
					pageSize: list_rows,
					sortType: self.type_active,
					name: self.searchtxt,
          districtId: self.currDistrictId,
          shopBusinessId: self.currBusinessId,
          categoryId: self.currCategoryId,
				}, (res) => {
					self.loading = false;
					self.last_page = res.data.lastPage;
					self.shopData = self.shopData.concat(res.data.records);
					if (res.data.lastPage <= 1) {
						self.no_more = true;
					} else {
						self.no_more = false;
					}
				})
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.restoreData();
				this.getData();
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 2000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			/*搜索*/
			search() {
				let self = this;
				self.restoreData();
				self.getData();
			},
			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.no_more) {
					return;
				}
				self.page++;
				if (self.page <= self.last_page) {
					self.getData();
				} else {
					self.no_more = true;
				}
			},

			//跳转店铺首页
			goto_shop(shopSupplierId) {
				this.gotoPage('/pages/shop/shop?shopSupplierId=' + shopSupplierId);
			},
			//跳转商品页面
			goto_product(productId) {
				this.gotoPage('/pages/product/detail/detail?productId=' + productId);
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f2f2f2;
	}

	.foot_ {
		height: 98rpx;
		width: 100%;
	}

  .seacth {
    width: 700rpx;
    height: 64rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

	.inner-tab {
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #ffffff;
		z-index: 9;
	}

	.inner-tab .item {
		flex: 1;
		font-size: 30rpx;
		height: 100%;
		line-height: 80rpx;
		position: relative;
		color: #666666;
		font-size: 30rpx;
	}

	.inner-tab .item.active,
	.inner-tab .item .arrow.active .iconfont {
		color: #333333;
	}

	.inner-tab .item.active::after {
		content: '';
		width: 72rpx;
		height: 4rpx;
		@include background_color('background_color');
		border-radius: 2rpx;
		position: absolute;
		bottom: 14rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.inner-tab .item .box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.inner-tab .item .arrows {
		margin-left: 10rpx;
		line-height: 0;
	}

	.inner-tab .item .iconfont {
		line-height: 24rpx;
		font-size: 24rpx;
	}

	.inner-tab .item .arrow,
	.inner-tab .item .svg-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.prodcut-list-wrap {
		// padding-bottom: 98rpx;
	}

	.prodcut-list-wrap .list {
		background: #FFFFFF;
	}

	.prodcut-list-wrap .list .item {
		padding: 20rpx;
		display: flex;
		border-bottom: 16rpx solid #f6f6f6;
	}

	.prodcut-list-wrap .product-cover,
	.prodcut-list-wrap .product-cover image {
		width: 220rpx;
		height: 220rpx;
	}

	.prodcut-list-wrap .product-info {
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.prodcut-list-wrap .product-title {
		display: -webkit-box;
		line-height: 40rpx;
		height: 80rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 32rpx;
	}

	.prodcut-list-wrap .already-sale {
		margin-top: 20rpx;
		color: #999;
		font-size: 24rpx;
	}

	.prodcut-list-wrap .already-sale>text {
		padding: 6rpx 10rpx;
		background-color: #f2f2f7;
	}

	.prodcut-list-wrap .price {
		@include font_color('price_color');
		font-size: 24rpx;
	}

	.prodcut-list-wrap .price .num {
		margin-left: 6rpx;
		padding: 0 4rpx;
		font-size: 40rpx;
	}

	// *********************
	// *********************
	.h1 {
		font-size: 32rpx;
	}

	.h2 {
		font-size: 28rpx;
	}

	.h3 {
		font-size: 24rpx;
	}

	.h4 {
		font-size: 20rpx;
	}

	.h5 {
		font-size: 16rpx;
	}

	.h6 {
		font-size: 12rpx;
	}

	.huaxianjia {
		text-decoration: line-through;
		color: #585858;
		margin-left: 4rpx;
	}

	.shop_list_body {
		width: 100%;
		// padding: 20rpx;
		box-sizing: border-box;
	}

	.shop_list_body_item {
		display: flex;
		width: 100%;
		max-height: 470rpx;
		margin-top: 30rpx;
		flex-direction: column;
		background-color: white;
		// border-radius: 20rpx;
		padding: 20rpx;
		// border-bottom: 2rpx #e8e8e8 solid;
		box-sizing: border-box;
	}

	.shop_list_body_item_shop {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.shop_list_body_item_shop_logo {
		width: 150rpx;
		height: 150rpx;
	}

	.shop_list_body_item_shop_logo image {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
	}

	.shop_list_body_item_shop_info {
		padding: 10rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		padding-top: 0;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		flex: 1;
	}

	.shop_list_body_item_shop_others {
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		text-align: right;
		padding-top: 0;
		font-size: 26rpx;
		color: #333333;
	}

  .shop-go-btn{
    margin-top: 70rpx;
    border: 1px solid red;
    padding: 8rpx 14rpx;
    border-radius: 5rpx;
    background: #fa3534;
    color: #fff;
    font-size: 22rpx;
  }

	.shop_list_body_item_product {
		width: 100%;
		height: 280rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		// background-color: #f2f2f2;
		padding: 10rpx;
		box-sizing: border-box;
		// border-radius: 15rpx;
	}

	.shop_list_body_item_product2 {
		width: 100%;
		height: 280rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// background-color: #f2f2f2;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
	}

	.shop_list_body_item_product2 .shop_list_body_item_product_item {
		margin: 0 10rpx;
	}

	.shop_list_body_item_product_item {
		width: 30%;
		background-color: white;
    margin-right: 10upx;
		// border-radius: 10rpx;
		/*overflow: hidden;*/
	}

	.shop_list_body_item_product_item image {
		width: 210rpx;
		height: 180rpx;
		border-radius: 12rpx;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.shop_list_body_item_product_item view {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
	}

	.shop_list_body_item_product_item_price {
		padding: 15rpx;
		display: flex;
		align-items: baseline;
		justify-content: center;
		font-size: 32rpx;
	}

	.brand {
		position: relative;
		color: #585858;
	}

	.sales {
		color: #585858;
	}

	.collect {
		margin-bottom: 26rpx;
	}


  /* 分类 开始 */
  .cate-mask{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0);
    z-index: 995;
    transition: .3s;

    .cate-content{
      width: 530upx;
      height: 100%;
      background: #fff;
      float:right;
      transform: translateX(100%);
      transition: .3s;
    }
    &.none{
      display: none;
    }
    &.show{
      background: rgba(0,0,0,.4);

      .cate-content{
        transform: translateX(0);
      }
    }
  }
  .cate-list{
    display: flex;
    flex-direction: column;
    height: 100%;
    .cate-item{
      display: flex;
      align-items: center;
      height: 90upx;
      padding-left: 30upx;
      font-size: 28upx;
      color: #555;
      position: relative;
    }
    .two{
      height: 64upx;
      color: #303133;
      font-size: 30upx;
      background: #c7c7c7;
    }
    .active{
      color: red;
    }
  }

</style>
